<template>
  <div class="content">
    <el-form inline>
      <el-form-item label="队伍名称">
        <el-input
          placeholder="请输入队伍名称"
          size="mini"
          clearable
          v-model="name"
        >
        </el-input>
        <!-- <el-select v-model="name" size="mini">
          <el-option label="请选择" :value="0"></el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="类型">
        <el-input
          placeholder="请输入队伍类型"
          size="mini"
          clearable
          v-model="type"
        >
        </el-input>
        <!-- <el-select v-model="type" size="mini">
          <el-option label="请选择" :value="0"></el-option>
        </el-select> -->
      </el-form-item>
      <!-- <el-form-item label="入库时间">
        <el-date-picker
          type="datetime"
          placeholder="选择入库时间"
          size="mini"
        ></el-date-picker>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" size="mini" @click="getlist()"
          >查询</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="dialogVisible = true"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="tableData" class="el-table-box" stripe style="width: 100%">
      <el-table-column
        prop="name"
        label="救援队伍名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="principal"
        label="主要负责人"
        align="center"
        width="100px"
      ></el-table-column>
      <el-table-column prop="job" label="职务" align="center"></el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        align="center"
        width="100px"
      ></el-table-column>
      <el-table-column
        prop="composition"
        label="组成"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="phone"
        label="联系方式"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="通讯地址"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="(isdialogVisible = true), handleEdit(scope.row)"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="delet(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 15]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
    <el-dialog
      title="增加救援队伍信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="closeDialogVisible"
    >
      <div style="display: block; text-align: center">
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          label-width="110px"
          style="margin-top: 0.125rem"
        >
          <el-form-item label="救援队名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入救援队名称"
            ></el-input
          ></el-form-item>
          <el-form-item label="主要负责人" prop="principal">
            <el-input
              v-model="form.principal"
              placeholder="请输入主要负责人"
            ></el-input>
          </el-form-item>
          <el-form-item label="职务" prop="job">
            <el-input v-model="form.job" placeholder="请输入职务"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-input v-model="form.type" placeholder="请输入类型"></el-input>
          </el-form-item>
          <el-form-item label="组成" prop="composition">
            <el-input
              v-model="form.composition"
              placeholder="请输入组成"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="phone">
            <el-input
              v-model="form.phone"
              placeholder="请输入联系方式"
            ></el-input>
          </el-form-item>
          <el-form-item label="通讯地址" prop="address">
            <el-input
              v-model="form.address"
              placeholder="请输入通讯地址"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submit()">确 定</el-button>
          <el-button @click="closeDialogVisible()">取 消</el-button>
        </span>
      </div>
    </el-dialog>

    <el-dialog
      title="修改救援队伍信息"
      :visible.sync="isdialogVisible"
      width="30%"
      :before-close="iscloseDialogVisible"
    >
      <div style="display: block; text-align: center">
        <el-form
          ref="addForm"
          :rules="rulesForm"
          :model="addForm"
          label-width="110px"
          style="margin-top: 0.125rem"
        >
          <el-form-item label="救援队名称" prop="name">
            <el-input
              v-model="addForm.name"
              placeholder="请输入救援队名称"
            ></el-input
          ></el-form-item>
          <el-form-item label="主要负责人" prop="principal">
            <el-input
              v-model="addForm.principal"
              placeholder="请输入主要负责人"
            ></el-input>
          </el-form-item>
          <el-form-item label="职务" prop="job">
            <el-input v-model="addForm.job" placeholder="请输入职务"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-input
              v-model="addForm.type"
              placeholder="请输入类型"
            ></el-input>
          </el-form-item>
          <el-form-item label="组成" prop="composition">
            <el-input
              v-model="addForm.composition"
              placeholder="请输入组成"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="phone">
            <el-input
              v-model="addForm.phone"
              placeholder="请输入联系方式"
            ></el-input>
          </el-form-item>
          <el-form-item label="通讯地址" prop="address">
            <el-input
              v-model="addForm.address"
              placeholder="请输入通讯地址"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addubmit()">确 定</el-button>
          <el-button @click="iscloseDialogVisible()">取 消</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRescueTeamInfoEntity,
  addRescueTeam,
  updateRescueTeam,
  deleteRescueTeam,
} from "../../../api/help";
export default {
  name: "RescueMaterialManagement",
  data() {
    return {
      dialogVisible: false,
      isdialogVisible: false,
      form: {
        name: "",
        principal: "",
        tailingPondId: sessionStorage.getItem("sensorId"),
        job: "",
        address: "",
        phone: "",
        composition: "",
        type: "",
      },
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        principal: [{ required: true, message: "请输入", trigger: "change" }],
        job: [{ required: true, message: "请输入", trigger: "change" }],
        address: [{ required: true, message: "请输入", trigger: "change" }],
        phone: [
          { required: true, validator: this.checkPhone, trigger: "blur" },
        ],
        type: [{ required: true, message: "请输入", trigger: "change" }],
        composition: [{ required: true, message: "请输入", trigger: "change" }],
      },
      addForm: {
        name: "",
        principal: "",
        tailingPondId: sessionStorage.getItem("sensorId"),
        job: "",
        address: "",
        phone: "",
        composition: "",
        type: "",
        id: "",
      },
      rulesForm: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        principal: [{ required: true, message: "请输入", trigger: "change" }],
        job: [{ required: true, message: "请输入", trigger: "change" }],
        address: [{ required: true, message: "请输入", trigger: "change" }],
        phone: [
          { required: true, validator: this.checkPhone, trigger: "blur" },
        ],
        type: [{ required: true, message: "请输入", trigger: "change" }],
        composition: [{ required: true, message: "请输入", trigger: "change" }],
      },
      name: "",
      type: "",
      tableData: [],
      total: 0,
      query: {
        page: 1,
        pagesize: 10,
      },
      tailingPondId: "",
    };
  },
  mounted() {
    this.tailingPondId = sessionStorage.getItem("sensorId");
    this.getlist();
  },
  methods: {
    // 自定义手机验证规则
    checkPhone(rule, value, callback) {
      if (!value) {
        return callback(new Error("不能为空"));
      } else {
        const reg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    },
    //添加取消
    closeDialogVisible() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
    },
    //添加取消(修改)
    iscloseDialogVisible() {
      this.isdialogVisible = false;
      this.$refs.addForm.resetFields();
    },
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.getlist();
    },
    //分页查询
    async getlist() {
      await getRescueTeamInfoEntity({
        type: this.type,
        name: this.name,
        tailingPondId: this.tailingPondId,
        pageCount: this.query.page,
        pageSize: this.query.pagesize,
      }).then((res) => {
        if (res.resultCode == "200") {
          this.tableData = res.parameter.list;
          this.total = res.parameter.total;
        } else {
          this.tableData = [];
        }
      });
    },
    //新增
    async submit() {
      this.$refs.form.validate(async (val) => {
        if (val) {
          await addRescueTeam(this.form).then((res) => {
            if (res.resultCode == 200) {
              this.$message({
                message: "新增成功",
                type: "success",
                offset: 450,
                duration: 1000,
              });

              this.getlist();
            } else {
              this.$message({
                message: "新增失败",
                type: "error",
                offset: 450,
                duration: 1000,
              });
            }
          });
          this.dialogVisible = false;
          this.$refs.form.resetFields();
        } else {
          this.$message({
            message: "请完善表单信息",
            type: "error",
            offset: 450,
            duration: 1000,
          });
        }
      });
    },
    //修改
    handleEdit(row) {
      this.addForm.name = row.name;
      this.addForm.principal = row.principal;
      this.addForm.job = row.job;
      this.addForm.address = row.address;
      this.addForm.phone = row.phone;
      this.addForm.composition = row.composition;
      this.addForm.id = row.id;
      this.addForm.type = row.type;
    },
    //修改提交
    async addubmit() {
      this.$refs.addForm.validate(async (val) => {
        if (val) {
          await updateRescueTeam(this.addForm).then((res) => {
            if (res.resultCode == 200) {
              this.$message({
                message: "修改成功",
                type: "success",
                offset: 450,
                duration: 1000,
              });
              this.getlist();
            } else {
              this.$message({
                message: "修改失败",
                type: "error",
                offset: 450,
                duration: 1000,
              });
            }
          });
          this.isdialogVisible = false;
        } else {
          this.$message({
            message: "请完善表单信息",
            type: "error",
            offset: 450,
            duration: 1000,
          });
        }
      });
    },
    //删除
    async delet(row) {
      const confirmResult = await this.$confirm(
        "此操作将强制永久删除该数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message({
          message: "已取消删除",
          type: "info",
          offset: 450,
          duration: 1000,
        });
      }
      await deleteRescueTeam({
        id: row.id,
      }).then((res) => {
        if (res.resultCode == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
            offset: 450,
            duration: 1000,
          });
          this.getlist();
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
            offset: 450,
            duration: 1000,
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.content {
  padding: 0.1rem;
  font-size: 0.01rem;
}
.el-table {
  margin-bottom: 0.15rem;
  display: block;
  height: 63vh;
  overflow: auto;
  text-align: center;
}
.el-table::before {
  z-index: inherit;
}
</style>